<template>
  <div>
    <basePage>
      <el-card>
        <!-- <el-row class="diy-row" :gutter="14">
          <el-col :span="2">
            <el-button type="primary" @click="showCreateDialog">添加字典</el-button>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="query"
              ><el-button slot="append" icon="el-icon-search"></el-button
            ></el-input>
          </el-col>
        </el-row> -->
        <el-table :data="reportList" border height="600">
          <el-table-column label="用例ID" prop="case_id" width="80"></el-table-column>
          <el-table-column
            label="任务ID"
            prop="task_id"
            width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="预期结果" prop="expect"></el-table-column>

          <el-table-column
            label="响应数据"
            prop="response_data"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="是否成功" prop="actual" width="100">
            <template scope="scope">
              <el-tag v-if="scope.row.actual === true" effect="dark" type="success">SUCCESS</el-tag>
              <el-tag v-else effect="dark" type="danger">FAILED</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="上报时间" prop="report_time"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </basePage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reportList: [],
      pageSize: 20,
      pageNum: 1,
      total: 0
    }
  },
  created() {
    this.getReportList()
  },
  methods: {
    getReportList() {
      this.$http
        .get(`/job/report/list?pageSize=${this.pageSize}&pageNum=${this.pageNum}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.reportList = resData.data.list
            this.total = resData.data.count
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getReportList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getReportList()
    },
    showCreateDialog() {
      console.log('aaa')
    }
  }
}
</script>
<style lang="less" scoped></style>
